<script>
export default {
  name: 'Home'
}
</script>
<script setup>
// start
import bjImage from '@/assets/images/bg.jpg'
import { getTime } from '@/utils/time'
import setting from '@/setting'
import { storeToRefs } from 'pinia'
import { ref, onMounted, inject } from 'vue'

const userInfo = inject('userInfo')

const time = ref(getTime())

const info = ref({
  src: userInfo.vm.data.avatar,
  username: userInfo.vm.data.name
})

const imgError = () => {
  // info.value.src = bjImage
}
</script>

<template>
  <div>
    <el-card>
      <div class="box_container">
        <img
          :src="info.src"
          @error="imgError"
          class="img_class marginRight20px"
        />
        <div class="info_container">
          <div class="text">
            {{ `${time}好呀！ ${info.username}` }}
          </div>
          <div class="platform">
            {{ setting.title }}
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.box_container {
  display: flex;

  .img_class {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.614);
  }
  .info_container {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

    .text {
      font-size: 2.5rem;
      font-weight: bolder;
    }

    .platform {
      font-size: 1.2rem;
      font-style: italic;
      color: rgb(150, 150, 150);
    }
  }
}
</style>
